<!--
 * @Author: Olivia
 * @Date: 2023-02-05 22:34:10
 * @custom_string_Olivia: Less is more
-->
<template>
 <div class="comment-reply">
  <van-nav-bar :title="comment.reply_count > 0 ? `${comment.reply_count}条回复` : '暂无回复'">
    <van-icon name="cross" slot="left" @click="$emit('close')" />
  </van-nav-bar>
  <div class="scroll-wrap">
    <!-- 当前评论项 -->
  <commentItem :comment="comment"/>
  <!-- 当前评论项 -->
  <!-- 全部回复 -->
  <van-cell title="全部回复"/>
  <commentList :source="comment.com_id" type="c" :list="commentList"/>
  <!-- 全部回复 -->
  </div>

  <!-- 底部评论 -->
  <div class="post-wrap">
    <van-button class="post-btn" size="small" round @click="isPostShow = true">评论</van-button>
  </div>
  <!-- 底部评论 -->
  <van-popup v-model="isPostShow" position="bottom">
        <commentPost :target="comment.com_id" @post-success="onPostSuccess"/>
    </van-popup>
 </div>
</template>
<script>

import commentItem from './comment-item.vue'
import commentList from './comment-list.vue'
import commentPost from './comment-post.vue'
export default {
  name: 'CommentReply',
  components: {
    commentItem,
    commentList,
    commentPost
  },
  data () {
    return {
      isPostShow: false,
      commentList: []
    }
  },
  props: {
    comment: {
      type: Object,
      required: true
    }
  },
  created () {
  },
  computed: {
  },
  methods: {
    onPostSuccess (data) {
      console.log(data)
      this.isPostShow = false // 关闭弹出层
      this.comment.reply_count++ // 更新回复的数量
      this.commentList.unshift(data.new_obj)
    }
  }
}
</script>
<style lang='less'  scoped>
.scroll-wrap {
    position: fixed;
    top: 46px;
    bottom: 44px;
    left: 0;
    right: 0;
}
.post-wrap {
    position: fixed;
    height: 88px/2;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-top: 1px solid #d8d8d8;
    .post-btn {
        width: 60%;
    }
}
</style>
